<template>
  <div>
    <div v-if="routeName !== 'specExhibition-exhibit-item'">
      <div class="exhib-detail xui-padding-horizontal-sm">
        <div v-if="isCN" v-html="typeDetail.content">
          暂无内容
        </div>
        <div v-else v-html="typeDetail.contentEn  ">
          暂无内容
        </div>
      </div>
      <div class="xui-grid-avg-4">
        <div class="xui-padding-sm exhib-item" v-for="(item,index) in listData" :key="index">
          <router-link :to="{name:'specExhibition-exhibit-item',params:{itemId:item.id}}" style="display:block">
            <img-box :imgSrc="item.picUrl" width="205" height="154"></img-box>
            <p v-if="isCN" class="xui-text-truncate xui-text-center xui-margin-top-sm">{{item.title}}</p>
            <p v-else class="xui-text-truncate xui-text-center xui-margin-top-sm">{{item.titleEn}}</p>
          </router-link>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
  import {
    getClass,
    getDisplayItem
  } from "@/api/specExhib";
  import imgBox from "@/components/widge/img-box";
  import {
    getLang
  } from "@/utils/lang";
  export default {
    components: {
      imgBox
    },
    data() {
      return {
        typeDetail: {
          content: ""
        },
        listData: []
      };
    },
    computed: {
      id() {
        return this.$route.params.id;
      },
      typeId() {
        return this.$route.params.typeId;
      },
      routeName() {
        return this.$route.name;
      },
      isCN() {
        return getLang() !== "en";
      }
    },
    methods: {
      getTypeDetail() {
        getClass(this.id).then(res => {
          this.typeDetail = res.data.recordsList.find(item => {
            return item.id == this.typeId;
            this.getDisplayList();
          });
        });
      },
      getDisplayList() {
        getDisplayItem(this.typeId).then(res => {
          this.listData = res.data.recordsList;
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getTypeDetail();
        this.getDisplayList();
      });
    },
    watch: {
      typeId: function () {
        this.getDisplayList();
        this.getTypeDetail();
      }
    },
    beforeRouteLeave(to, from, next) {
      console.log("typeid:", this.typeId);
      if (to.name == "specExhibition-exhibit") {
        next({
          name: "specExhibition-exhibit-list",
          params: {
            typeId: this.typeId
          }
        });
      } else {
        next();
      }
    }
  };

</script>

<style lang="less" scoped>
  .exhib-detail {
    font-size: 15px;
    line-height: 30px;
    max-height: 180px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .exhib-item p {
    transition: color 0.2s;
  }

  .exhib-item:hover p {
    color: #d3af68;
  }

</style>
